/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Cell, Table, TableBody, TableRow, Text, TableHead,} from "customize-easy-ui-component";
import {DirectLink} from "../../routing/Link";
import {multilines2Html} from "../tools";
import {item宏观检验o, 元件检查项目, 附页其它项目} from "./editorMeta";

//内部检验报告（附页）
export const 内部检验报告附页= ({theme, orc, rep} :{theme: any, orc:any, rep:any}
) => {
  //拆解两个区域的, 数组序号pfrom 从0为起点； 不包含pto；
  function partRender(pfrom:number,pto:number)
  {
    return <>
      { item宏观检验o.map(([name,conf,]: any, i:number) => {
        if(i<pfrom || i>=pto) return null;
        const {t: title,}=conf;
        return <TableRow key={i}>
          { (0===i || 10===i) && <CCell rowSpan={10}  split>主要受压元部件检查</CCell> }
          <CCell>{title?? orc?.[name]?.t??'－'}</CCell>
          { 元件检查项目.map(([ititle,subf], m:number) => {
            return <CCell key={2+m}>{orc?.[name]?.[subf]??'－'}</CCell>
          })}
        </TableRow>
      }) }
    </>;
  }
  //for(let one of 附页其它项目){} useMemo 却需正规react的组件; 【约束】固定的3X3个项目布局的。
  const renderOtherItem=<>
    {(new Array(3).fill(null)).map((_,l:number) => {
      return <TableRow key={l}>
        { 0===l && <CCell rowSpan={3}>其他检验项目</CCell>
        }
        { (new Array(3).fill(null)).map((_,f:number) => {
            const [name, desc]=附页其它项目[3*l + f];
            return <React.Fragment key={f}>
              <CCell>{desc}</CCell><CCell>{orc?.[name]??'－'}</CCell>
            </React.Fragment>;
        })}
      </TableRow>
    })}
  </>

  return <>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between'
    }}>
      <Text></Text>
      <Text>报告编号：{rep.isp.no}</Text>
    </div>
    <Table fixed={["5.5%", "%", "8.5%", "8.5%", "8.5%", "8.5%", "8.5%", "8.5%", "8.5%", "8.5%"]} css={{borderCollapse: 'collapse'}} tight  miniw={800}>
      <TableHead>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ALL`}>
          <TableRow>
            <CCell></CCell><CCell>\</CCell>
            { 元件检查项目.map(([ititle,subf], m:number) => {
              return <CCell key={m}>{ititle}</CCell>
            })}
          </TableRow>
        </DirectLink>
      </TableHead>
      <TableBody>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/MetacomponM#MetacomponM`}>
          {partRender(0,10)}
        </DirectLink>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/MetacomponO#MetacomponO`}>
          {partRender(10,20)}
        </DirectLink>
      </TableBody>
    </Table>
    <Table fixed={["5.5%","17%", "14%", "17%","14%", "17%", "%"]} css={{borderCollapse: 'collapse'}} tight  miniw={800}>
      <TableBody>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/MetacomponO#MetacomponO`}>
          {renderOtherItem}
        </DirectLink>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/MetacomponM#MetacomponM`}>
          <TableRow>
            <Cell colSpan={7}>
              {multilines2Html(orc.附说明 || '／', (txt, i) => {
                return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text css={{whiteSpace:'break-spaces'}}>{txt}</Text></React.Fragment>
              })}
            </Cell>
          </TableRow>
        </DirectLink>
      </TableBody>
    </Table>
    <Table fixed={ ["62%","%"]  }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
      <TableBody>
        <TableRow>
          <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
            <div><Text>编制：</Text>    </div>
            <div css={{textAlign: 'end'}}><Text >日期</Text>2022-12-31</div>
          </div></CCell>
          <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
            <div><Text >审核：</Text>  </div>
            <div css={{textAlign: 'end'}}><Text >日期</Text>2021-01-31</div>
          </div></CCell>
        </TableRow>
      </TableBody>
    </Table>
    <Text css={{fontSize:'0.8rem'}}>注：1、上述检查项目中，符合要求的打“√”，基本符合要求的打“○”，不符合要求的打“×”，无此项目的划去该项目 （打“－”）；</Text>
    <Text css={{textIndent: '1.6rem', display: 'flex',fontSize:'0.8rem'}}>
      2、有其他检验项目时，应出具专项检验报告。
    </Text>
  </>;
};

